<!DOCTYPE html>
<html>

	<head>
	<meta charset="UTF-8">
	<title>script操作dom对象</title>
	<script type="text/javascript">
		//在javascript中使用function关键字定义个函数（方法）
		/*
		 js中的函数不会自动运行，需要和是些空间的事件动作进行绑定，通过事件的触发来执行该函数的内容
		 * */
		var checkMe = function() {
			console.info("helloworld");
			document.getElementById('txtName').value="小李";
			var strName = document.getElementById('txtName').value;
			console.info(strName +"是数字么？"+isNaN(strName));
			
			//var str="Free Web Tutorials!"
			//document.write("\n"+str.link("http://www.w3school.com.cn"))
			
		}
		/**
		 * 显示当前时间
		 */
		function showTime(){
			//创建 一个时间对象，获取当前时间
			var date = new Date();
			console.info(date.toLocaleTimeString());
			//将当前时间内容写到指定的html控件中
			document.getElementById('spanTime').innerHTML = date.toLocaleTimeString().fontcolor("Red");
			//计时触发函数（指定多长时间执行一次指定的代码）
			//每隔950毫秒调用一次 showTime函数
			setTimeout('showTime()',950);
		}
		
		/*
 * js构建对象
 */
function doTest() {
	// 1、直接创建对象的方式
	//js中定义对象
	//定义一个学生类
	var stu = new Object();
	//设定对象的属性
	stu.stuName = 'xiaoli';
	stu.stuAge = 20;
	stu.stuSex = '男';
	//定义对象的行为
	stu.doStuding = function() {
		console.info("stu:name-" + stu.stuName);
	}

	//调用stu类的行为方法
	stu.doStuding();

	/*******************************************/
	//对象初始化器方式
	var user = {
		//属性
		name: 'James',
		age: 37,
		//行为方法
		getName: function() {
			return this.name; 
		},
		display: function() {
			console.info('我是' + this.getName() +
				', 今年' + this.age + '岁。');
		}
	}

//调用类对象的行为方法
user.display();

/*********************************************/
//构造函数方式
function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = speak; 
} 
//该部分可以放在构造函数内部进行定义
function speak(){ 
console.info(this.name + "is " + this.age + "years old"); 
} 

var person1 = new Person("james", 37); 
var person2 = new Person("Jack", 18); 

//调用实例对象的方法
person1.speak();

/*******************************************/
//prototype原型方式
function Person2(){
} 

Person2.prototype.name="James"; 
Person2.prototype.age=37; 
Person2.prototype.speak = function(){ 
console.info(this.name + " is " + this.age + " years old"); 
} 
var person1 = new Person2(); 
person1.speak(); 

/*************************************/
//混合的构造函数/原型方式
}
	</script>
</head>

	<!--<body onload="showTime();">-->
		<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action -- 指定的是服务器端的那个程序（类-方法）进行响应；
			method -- 使用哪种方式进行数据从客户端发送到服务器。
			      选项：get -- 将客户端数据信息附加在访问连接url的尾端进行发送信息；
			                 缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			                长度会受到限制（不能大于255个制度） 
			                汉字容易乱码（字节流方式传输）
			       post -- 将客户端数据信息以数据包的形式发送到服务器端
			                 不在上述问题。
		-->
		<div align="center">
		<form action="#" method="get">				
			<table border="1" cellpadding="0" cellspacing="0" 
				bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
			<tbody>
			<tr>
				<td>姓名</td><td><input type="text" id="txtName" name="txtName" value="admin" /></td>
			</tr>
			<tr>
				<td>登录密码</td>
				<td><input readonly="readonly" type="password" id="txtPsw" name="txtPsw"/></td>
			</tr>
			<tr>
				<td>性别</td>
				<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
				<td><input type="radio" id="radSex" checked="checked" name="radSex" /> 女
				    <input type="radio" id="radSex2" name="radSex"/>男
					<input type="radio" id="radSex3" name="radSex"/>未知</td>
			</tr>
			
			<tr>
				<td>个人简历</td>
				<td><input type="file" id="fileResume" name="fileResume"/></td>
			</tr>
			<tr>
				<td>兴趣爱好</td>
				<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
				<td><input type="checkbox" id="chHobby1" name="chHobby"/>游泳
					<input type="checkbox" id="chHobby2" name="chHobby"/>爬山
				<input type="checkbox" id="chHobby3" checked name="chHobby"/>dota
				<input type="checkbox" id="chHobby4" name="chHobby"/>coding
				<input type="checkbox" id="chHobby5" name="chHobby"/>testing</td>
			</tr>
			<tr>
				<td>隐藏控件</td>
				<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
			</tr>
			<tr>
				<td>学历</td>
				<td><select id="selectXL" name="selectXL" style="width: 120px;">
					<option value=""></option>
					<option value="DZ">大专</option>
					<option value="BK" selected>本科</option>					
					<option value="SS">硕士</option>
					<option value="BS">博士</option>
				</select></td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
			</tr>
			<tr>
				<td>当前时间:</td>
				<td><span id="spanTime"></span></td>
			</tr>
			<tr>
				<td><input type="submit" value="提交" id="btnSubmit" onclick="doTest();"/></td>
				<td><input type="reset" value="重置" id="btnSubmit"/></td>
			</tr>
		</tbody>
		</table>
			
			
			
		</form>
		</div>
	</body>

</html>